<template>
  <el-container class="add_enter_wrapper">
    <el-header class="header">
      <el-row type="flex" justify="space-between">
        <div class="left">
          <span
            style="cursor: pointer"
            @click="$router.push('/park/enterprise')"
          ><i class="el-icon-back" />返回</span>&nbsp; | &nbsp;
          <span>添加企业</span>
        </div>
        <span>{{ $store.getters.name }}</span>
      </el-row>
    </el-header>
    <el-main class="main">
      <el-form
        ref="addEnterpriseForm"
        :model="addEnterpriseFormData"
        :rules="addEnterpriseFormRules"
      >
        <p>| 企业信息</p>
        <el-row class="row">
          <el-form-item label-width="30vh" label="企业名称:" prop="name">
            <el-input
              v-model="addEnterpriseFormData.name"
              style="width: 25vw"
              placeholder="请输入企业名称"
            />
          </el-form-item>
          <el-form-item label-width="30vh" label="法人:" prop="legalPerson">
            <el-input
              v-model="addEnterpriseFormData.legalPerson"
              style="width: 25vw"
              placeholder="请输入法人"
            />
          </el-form-item>
          <el-form-item
            label-width="30vh"
            label="注册地址:"
            prop="registeredAddress"
          >
            <el-input
              v-model="addEnterpriseFormData.registeredAddress"
              style="width: 25vw"
              placeholder="请输入注册地址"
            />
          </el-form-item>
          <el-form-item
            label-width="30vh"
            label="所在行业:"
            prop="industryCode"
          >
            <el-select
              v-model="addEnterpriseFormData.industryCode"
              placeholder="请选择所在行业"
              style="width: 25vw"
            >
              <el-option
                v-for="item in industryList"
                :key="item.industryCode"
                :label="item.industryName"
                :value="item.industryCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label-width="30vh"
            label="营业执照:"
            prop="businessLicense"
            :rules="fileRules"
          >
            <el-upload
              ref="upload"
              action=""
              :http-request="uploadFile"
              :on-remove="onRemove"
              :before-upload="beforeUpload"
            >
              <el-button
                v-if="isUploadFile"
                :style="{ backgroundColor: '#f1fcec', color: '#67c23a' }"
                size="small"
                disabled
              >已上传</el-button>
              <el-button v-else size="small">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                支持扩展名：.png .jpg .jpeg , 文件大小不得超过5M
              </div>
            </el-upload>
          </el-form-item>
        </el-row>
        <p class="ren">| 联系人信息</p>
        <el-row class="row">
          <el-form-item label-width="30vh" label="企业联系人:" prop="contact">
            <el-input
              v-model="addEnterpriseFormData.contact"
              style="width: 25vw"
              placeholder="请输入企业联系人"
            />
          </el-form-item>
          <el-form-item
            label-width="30vh"
            label="联系电话:"
            prop="contactNumber"
          >
            <el-input
              v-model="addEnterpriseFormData.contactNumber"
              style="width: 25vw"
              placeholder="请输入联系电话"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </el-main>
    <el-footer
      style="padding: 24px 50px; height: 100px; background-color: #fff"
    >
      <el-row type="flex" justify="center" align="middle" style="height: 100%">
        <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="addEnterpriseBtn">确定</el-button>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
import {
  addEnterpriseApi,
  getEnterpriseIndustryApi,
  uploadFileApi

} from '@/api/enterprise'
export default {
  data() {
    return {
      // 添加企业表单数据
      addEnterpriseFormData: {
        name: '', // 企业名称
        legalPerson: '', // 企业法人
        registeredAddress: '', // 注册地址
        industryCode: '', // 行业编号
        businessLicenseUrl: '', // 上传文件url
        businessLicenseId: '', // 上传文件id
        contact: '', // 企业联系人
        contactNumber: '' // 企业联系方式
      },
      // 添加企业表单校验规则
      addEnterpriseFormRules: {
        name: [
          { required: true, message: '必填项，内容不能为空', trigger: 'blur' }
        ],
        legalPerson: [
          { required: true, message: '必填项，内容不能为空', trigger: 'blur' }
        ],
        registeredAddress: [
          { required: true, message: '必填项，内容不能为空', trigger: 'blur' }
        ],
        industryCode: [
          {
            required: true,
            message: '必填项，内容不能为空',
            trigger: 'change'
          }
        ],
        contact: [
          { required: true, message: '必填项，内容不能为空', trigger: 'blur' }
        ],
        contactNumber: [
          { required: true, message: '必填项，内容不能为空', trigger: 'blur' },
          {
            pattern: /^1[34578]\d{9}$/,
            message: '目前只支持中国大陆的手机号码',
            trigger: 'blur'
          }
        ],
        businessLicense: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (
                !this.addEnterpriseFormData.businessLicenseId ||
                !this.addEnterpriseFormData.businessLicenseUrl
              ) {
                callback(new Error('必填项，内容不能为空'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      },
      // 行业列表
      industryList: [],
      // 上传文件成功列表
      fileList: [],
      // 禁用按钮
      isUploadFile: false
    }
  },
  created() {
    this.getEnterpriseIndustry()
  },
  methods: {
    // 查询企业所属行业列表
    async getEnterpriseIndustry() {
      const { data } = await getEnterpriseIndustryApi()
      this.industryList = data
    },

    // 上传文件
    async uploadFile(file) {
      // 创建formData对象
      const fd = new FormData()
      // 添加文件到formData中
      fd.append('file', file.file)
      // 添加类型
      fd.append('type', 1)
      // 发送请求
      const { data } = await uploadFileApi(fd)
      // 保存数据
      this.fileList.push(data)
      this.addEnterpriseFormData.businessLicenseId = data.id
      this.addEnterpriseFormData.businessLicenseUrl = data.url
      // 禁用按钮
      this.isUploadFile = true
      this.$forceUpdate()
    },

    // 提交表单
    async addEnterpriseBtn() {
      // 校验表单
      await this.$refs.addEnterpriseForm.validate()
      // 发送数据
      await addEnterpriseApi(this.addEnterpriseFormData)
      // 提示用户
      this.$message.success('添加企业成功')
      // 跳转页面
      this.$router.push('/park/enterprise')
      // 重置表单
      this.resetForm()
    },

    // 重置
    resetForm() {
      // 重置表单
      this.$refs.addEnterpriseForm.resetFields()
      // 清空上传的文件
      this.$refs.upload.clearFiles()
      // 开放上传文件按钮
      this.isUploadFile = false
    },

    // 删除文件钩子
    onRemove() {
      this.isUploadFile = false
    },

    // 上传前钩子
    beforeUpload(file) {
      const isImgList = ['image/jpeg', 'image/jpg', 'image/png']
      const isJPG = isImgList.includes(file.type)
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传营业执照只能是 JPG 格式!')
        return false
      }
      if (!isLt5M) {
        this.$message.error('上传营业执照大小不能超过 5MB!')
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.add_enter_wrapper {
  height: 100vh;
  background-color: #f2f4f8;
}
.header {
  padding: 20px;
  background-color: #fff;
}
.main {
  margin: 0 130px;
  p {
    background-color: #fff;
    padding: 30px 0;
    margin: 0;
  }
  .ren {
    margin-top: 20px;
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: #fff;
}
</style>
